<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Les matches</title>
   <link rel='stylesheet' type='text/css' href='css/menu.css' />
   <link rel='stylesheet' type='text/css' href='css/common.css' />
   <link rel='stylesheet' type='text/css' href='css/team.css' />
   <!-- <link rel='stylesheet' type='text/css' href='css/jquery-ui.css' /> -->
   <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  	<script type="text/javascript" src="js/shared.js"></script>
  	<script>
$(document).ready(function(){

	$("body").append("<div id='dialog_bet'></div>");
    $("#dialog_bet").dialog({
        autoOpen : false,
        modal : true,
        closeOnEscape : true,
        width : 500,
    	title : 'Votre pari',
    	buttons     : {
            'Valider' : function(){
                $data = $('#dialog_form').serialize();
                $(this).dialog('close');
                $add = $.ajax({
                    url : 'paris',
                    type: "POST",
                    dataType: 'json',
                    data : $data
                });
                $add
                .fail(function(){
                    alert('erreur http');
                })
                .done(function(data){
                    alert(data.msg);
                })
            }
        }
    });
	
	$.ajax({
		url : 'match',
		dataType : 'json',
		success : function(data){
			init(data);
			$("body").append("<p/><table id='matches'><tr><th>Home</th><th>Away</th><th>Venue</th><th>Scheduled</th></tr></table>");
			
			if(data.connected == true){
				for(var i = 0; i < data.matches.length ; i++){
					$("#matches").append("<tr class='match' data-bet='" + data.matches[i].game_id + "'>"
					        + "<td data-bet='" + data.matches[i].home_id + "'>" + data.matches[i].home + "</td>"
					        + "<td data-bet='" +  data.matches[i].away_id + "'>" + data.matches[i].away + "</td>"
					        + "<td>" + data.matches[i].venue + "</td>"
					        + "<td>" + data.matches[i].scheduled + "</td>"
					        + "<td><button class='bet' value='" + data.matches[i].game_id + "'>Parier</button></td>"
					        + "</tr>");
				}
			}
		}
	});
	
	$(document).on('click', '.bet', function(){
		$game_id = $(this).attr('value');
		$home_id = $("tr[data-bet='" + $game_id + "']").children(":first").attr("data-bet");
		$home_name = $("tr[data-bet='" + $game_id + "']").children(":first").text();
		$away_id = $("tr[data-bet='" + $game_id + "']").children(":nth-child(2)").attr("data-bet");
		$away_name = $("tr[data-bet='" + $game_id + "']").children(":nth-child(2)").text();
		$("#dialog_bet").html("<form id='dialog_form'>"
				+ "Récapitulatif : <p>" + $home_name + " contre " + $away_name + "</p>\n"
				+ "<label for='type_pari'>Type de pari</label><select id='type_pari' name='type_pari'>"
				+ "<option label='pari_gagnant' value='0' selected>Nom du gagnant</option>"
				+ "<option label='pari_pair' value='1'>Nombre de buts pairs/impairs</option>"
				+ "</select>"
				+ "<div id='les_paris'>"
					+ "<div id='pari_gagnant'><label for='valeur'>Gagnant</label>"
						+ "<select name='valeur'>"
						+ "<option value='" + $home_id + "'>" + $home_name + "</option>"
						+ "<option value='" + $away_id + "'>" + $away_name + "</option>"
						+ "</select>"
					+ "</div>"
					+ "<div id='pari_pair'>"
						+ "<input type='radio' name='valeur' value='pair' checked>Nombre de buts pair<br/>"
						+ "<input type='radio' name='valeur' value='impair'>Nombre de buts impair"
					+ "</div>"
				+ "</div>"
				+ "</form>");
		$("#dialog_form").append("<div><label for='montant'>Montant misé</label>"
				+ "<input type='text' name='montant'/></div>");
		$("#dialog_form").append("<input type='hidden' name='match' value='" + $game_id + "'/>");
		//$("#pari_pair").hide();
		showDiv("pari_gagnant");
		$("#dialog_bet").dialog("open");
    });
	
	$(document).on('change', '#type_pari', function(){
		$type = $(this).children(':selected').attr('label');
		showDiv($type);
	});
	
	function showDiv($div){
		$("#les_paris").contents().hide();
		$("#les_paris").contents().children().attr("disabled", "disabled");
		$("#les_paris").children("[id = '" + $div + "']").show();
		$("#les_paris").children("[id = '" + $div + "']").children().removeAttr('disabled');
	}
	
	$(document).on('click', '.match', function(){
		$game_id = $(this).attr('data-bet');
		$home_id = $("tr[data-bet='" + $game_id + "']").children(":first").attr("data-bet");
		$home_name = $("tr[data-bet='" + $game_id + "']").children(":first").text();
		$away_id = $("tr[data-bet='" + $game_id + "']").children(":nth-child(2)").attr("data-bet");
		$away_name = $("tr[data-bet='" + $game_id + "']").children(":nth-child(2)").text();
		$("#teamsInfo").remove();
		$("body").append("<p/><div id='teamsInfo'></div>");
		$("#teamsInfo").append("<div id='title_team_info'>Team Info : " + $home_name + " contre " + $away_name + "</div>\n");
		
		$.ajax({
			url : 'team?team_id_home='+$home_id+'&team_id_away='+$away_id,
			dataType : 'json',
			success : function(data){
				//init(data);
				$("#teamsInfo").append("<table id='team'><tr><th>Nom</th><th>" + $home_name + "</th><th>" + $away_name + "</th></tr></table>");
				if(data.connected == true){
					for(var i = 0; i < data.teams.length ; i++){
						if(data.teams[i].name == "Joueurs"){
							
							var players_home = "<div><span class='players_name'>Prenom/Nom</span>"
							+"<span class='players_position'>Position</span>"
							+"<span class='players_p_position'>Primary Position</span>"
							+"<span class='players_number'>Number</span></div>";
							var players_away = "<div><span class='players_name'>Prenom/Nom</span>"
								+"<span class='players_position'>Position</span>"
								+"<span class='players_p_position'>Primary Position</span>"
								+"<span class='players_number'>Number</span></div>";
							
							for(var j=0 ; j < data.teams[i].team_home.length; j++){
								players_home += "<div><span class='players_name'>"+data.teams[i].team_home[j].full_name+"</span>"
								+"<span class='players_position'>"+data.teams[i].team_home[j].position+"</span>"
								+"<span class='players_p_position'>"+data.teams[i].team_home[j].primary_position+"</span>"
								+"<span class='players_number'>"+data.teams[i].team_home[j].jersey_number+"</span></div>";
							}
							
							for(var j=0 ; j < data.teams[i].team_away.length; j++){
								players_away += "<div><span class='players_name'>"+data.teams[i].team_away[j].full_name+"</span>"
								+"<span class='players_position'>"+data.teams[i].team_away[j].position+"</span>"
								+"<span class='players_p_position'>"+data.teams[i].team_away[j].primary_position+"</span>"
								+"<span class='players_number'>"+data.teams[i].team_away[j].jersey_number+"</span></div>";
							}
							
							$("#team").append("<tr>"
							        + "<td>" + data.teams[i].name + "</td>"
							        + "<td>" + players_home +"</td>"
							        + "<td>" + players_away +"</td>"
							        + "</tr>");
							
						}else{
							$("#team").append("<tr>"
							        + "<td>" + data.teams[i].name + "</td>"
							        + "<td>" + data.teams[i].team_home + "</td>"
							        + "<td>" + data.teams[i].team_away + "</td>"
							        + "</tr>");							
						}
					}
				}
			}
		});
	});
});
</script>
  </head>
  <body>
  </body>
</html>
